<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block class="text-white" slot="content">
				{{ahylx ? '会员类型详细':'会员列表'}}
			</block>
		</cu-custom>


		<view v-if="ahylx" class="bg-white">
			<!-- 会员类型详细 -->
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> {{ahylx.hlname}}
				</view>
			</view>
			<view class="padding">
				<view class="cu-form-group">
					<view class="title">有效期</view>
					<view>{{ahylx.zq}}天</view>
				</view>
				<view class="cu-form-group">
					<view class="title">可用次数</view>
					<view>{{ahylx.cs}}次</view>
				</view>
				<view class="cu-form-group">
					<view class="title">金额</view>
					<view>￥{{ahylx.amount}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">上架状态</view>
					<view><button class="cu-btn sm bg-gradual-blue">{{ahylx.flg}}</button></view>
				</view>
				<view class="cu-form-group">
					<view class="title">启用状态</view>
					<view><button class="cu-btn sm bg-gradual-blue">{{ahylx.stu}}</button></view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top-sm">
			<view class="padding solid-bottom flex justify-between">
				<view class="text-gray title">
					<text>会员</text>
					<view class="cu-tag bg-red round margin-left-sm">{{hytotal}}</view>
				</view>
			</view>
			<view class="padding-bottom-sm">
				<view class="padding-sm" v-for="(hy,index) in ahys" :key="index"
					@click="navigateToHyDetail(hy.hyjlid)">
					<view class="flex bg-white shadow">
						<view class="flex-direction align-center">
							<view class="cu-avatar lg round margin-left-lg margin-top"
								:style="'background-image:url('+hy.headimg+');'"></view>
							<!-- <view class="padding-sm">{{hy.nc}}</view> -->
						</view>
						<view class="flex-treble  padding">
							<view class="margin-bottom">{{hy.nc}}</view>
							<!-- <view>{{hyjl.zq}}次</view>
									<view>{{hyjl.cd}}购买</view>
									<view>{{hyjl.sd}}开始</view> -->
							<view class="cuIcon-time">{{hy.ed}}结束</view>
						</view>
						<view class="flex-sub flex flex-direction justify-start padding-xs">
							<!-- <view class="text-red text-lg">￥{{hyjl.amount / 100}}</view> -->
							<view class="text-sm margin-top">
								<text v-if="hy.tkflg == 'U'">未退款</text>
								<text v-if="hy.tkflg == 'R'">已申退</text>
								<text v-if="hy.tkflg == 'J'">已退还</text>
							</view>
							<view class="text-sm margin-top">
								<text v-if="hy.stu == 'U'">未开始</text>
								<text v-if="hy.stu == 'R'">已生效</text>
								<text v-if="hy.stu == 'F'">已结束</text>
							</view>
						</view>
					</view>
				</view>
		
			</view>
			<view v-if="ahys.length < pageInfo.total" class="padding flex flex-direction">
				<button class="cu-btn bg-green lg" @tap="loadMore">显示更多</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				ahylx: undefined,
				hytotal: 0,
				ahys: [],
				pageInfo: {
					current: 1,
					total: 0,
					size: 3
				}
			}
		},
		onLoad: function(option) {
			if (option.hylxid) {
				this.loadHylx(option.hylxid);
			} else {
				this.loadHys();
			}
			
		},
		methods: {
			navigateToHyDetail(hyid) {
				uni.navigateTo({
					url: "/pages/xy/hy/detail?hyid=" + hyid
				});
			},
			loadHylx: function(hylxid) {
				this.http.get({
					url: "/jl/hylx/info?hylxid=" + hylxid
				}).then(res => {
					this.ahylx = res.hylx;
					this.loadHys();
				});
			},
			loadHys: function() {
				return this.http.get({
					url: "/jl/hyjl/page",
					param: {
						hylxid: this.ahylx ? this.ahylx.hylxid : "",
						current: this.pageInfo.current,
						size: this.pageInfo.size
					}
				}).then(data => {
					this.ahys.push(...this.ahys, ...data.ahyjls.records);
					this.hytotal = data.ahyjls.total;
				});
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadHys();
			}

		}
	}
</script>

<style>
</style>